﻿<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>幻灯片 </title>
<style type="text/css">
#flash {
	width:500px;
	height:300px;
	border:2px #0C3 solid;
	overflow:hidden;
}
#boxt {
	width:2000%;
	height:100%;
}
#boxt img {
	width:500px;
	height:300px;
}
#boxt ul {
	margin:0px;
	padding:0px;
	list-style:none;
	float:left;
}
#boxt ul li {
	float:left;
}
</style>
</head>

<body>
<h1>案例一定宽情况下幻灯片运动</h1>
<h2 id="h2"></h2>
<div id="flash">
  <div id="boxt">
    <ul id="flashul">
      <li><a href="#"><img src="img/hf1.jpg" alt="合肥野生动物园"/></a></li>
      <li><a href="#"><img src="img/hf2.jpg" alt="合肥天鹅湖"/></a></li>
      <li><a href="#"><img src="img/hf3.jpg" alt="合肥天鹅湖万达广场"/></a></li>
      <li><a href="#"><img src="img/hf4.jpg" alt="合肥天鹅湖万达广场"/></a></li>
    </ul>
    <ul id="flashul2">
    </ul>
  </div>
</div>
<script type="text/javascript">
var Quint ={
		easeIn: function(t,b,c,d){
			var rs = c*(t/=d)*t*t*t*t + b;
			return Math.ceil(rs);	//返回一个整数
		},
		easeOut: function(t,b,c,d){
			var rs = c*((t=t/d-1)*t*t*t*t + 1) + b;
			return Math.ceil(rs);	
		},
		easeInOut: function(t,b,c,d){
			var rs = 0;
			if ((t/=d/2) < 1){ rs = c/2*t*t*t*t*t + b; }
			else { rs =  c/2*((t-=2)*t*t*t*t + 2) + b;}
			return Math.ceil(rs);	
		},
		easeT: function(t,b,c,d){
			var rs =  -c * ((t=t/d-1)*t*t*t - 1) + b;
			return Math.ceil(rs);	
		}
} 
//统一函数
var fnMove = Quint.easeT; 
var change =500, duration = 50, begin = 0,time=0;		//初始化参数

//初始化参数
var f = document.getElementById("flash");
var fu = document.getElementById("flashul");
var fu2 = document.getElementById("flashul2");
var h2 = document.getElementById("h2");
var lis = fu.getElementsByTagName("li");
var l = lis.length;
fu2.innerHTML = fu.innerHTML;

//核心函数
function A(index){
	if(index==l) {index = 0;}
	time++;
	begin =  index*change;
	//控制每张图片从开始运动到结束
	if(time<duration){
		f.scrollLeft = fnMove(time,begin,change,duration);; 
		h2.innerHTML = f.scrollLeft; 
		setTimeout(function(){ A(index); }, 1);
	}
	else{
		time = 0 ;
		//通过index告知图片个数
		setTimeout(function(){ A(++index); }, 1000);
	}
}
A(0);
</script>
</body>
</html>
